<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>Title</title>
    <!-- load css -->
    <link rel="stylesheet" type="text/css" th:href="@{/plugin/layui/css/font/iconfont.css}" media="all"/>
    <link rel="stylesheet" type="text/css" th:href="@{/plugin/layui/js/layui/css/layui.css}"  media="all"/>
    <link rel="stylesheet" type="text/css" th:href="@{/plugin/bootstrap/bootstrap/css/bootstrap.min.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/plugin/bootstrap-table/bootstrap-table.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/table.css}"  media="all"/>
    <link rel="stylesheet" type="text/css" th:href="@{/plugin/bootstrap/bootstrap/css/bootstrap.min.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/plugin/layui/js/select2/css/select2.css}" media="all"/>
</head>
<style>
    .operation{
        width: 10rem;
    }
    .layui-inline{
        height: 5rem;
    }
    .panel{
        margin: 0;
    }
</style>
<body>
<div class="layui-fluid larry-wrapper" id="StandardVUE">
    <div class="layui-row layui-col-space30">
        <div class="layui-col-xs24">
            <section class="panel panel-padding" style="margin-top: 2rem">
                <div style="padding: 0 4rem;">
                    <form id="form1" class="layui-form layui-form-pane" action="">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">库位高度</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="wareHight" id="wareHight" required="required" jq-verify="required" placeholder="库位高度"  lay-verify="required"  autocomplete="off" class="layui-input "/>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">主单位数量</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="unitNumber" id="unitNumber" required="required" jq-verify="required" placeholder="主单位数量"  lay-verify="required"  autocomplete="off" class="layui-input "/>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">TI*HI</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="TIHI" id="TIHI" required="required" jq-verify="required"  lay-verify="required"  placeholder="TI*HI" autocomplete="off" class="layui-input "/>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="layui-form-item" style="margin: 1rem 0;position: absolute;top: 6.5rem;right: 10%;">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit id="addDetail">添加</button>
                        <!--<button type="reset" class="layui-btn layui-btn-primary" id="Initform">重置</button>-->
                    </div>
                </div>
            </section>
            <div>
                <table data-undefined-text=">_<" data-height="300" id="table"></table>
            </div>
        </div>
    </div>
</div>
</body>
<div th:include="public/public_js::public_js"></div>
<script th:src="@{/plugin/beyond/assets/js/fuelux/wizard/wizard-custom.js}"></script>

<script>
    var supplierdata;
    var userId = localStorage['id'];
    $(function () {
//        $.ajax({
//            url: '/zxsswms/wmsPurchaseOrder/getWmsOwnerSupplierByHzid',
//            type: 'GET',
//            dataType: 'json',
//
//            contentType: "application/json",
//            // async: false,
//            data: '',
//            success: function (data, status) {
//                if (data.type === "success") {
//                    layer.msg(data.title);
//                    supplierdata = data;
//                    console.log('dddddddddddata', data);
//                }
//            },
//            error: function () {
//                layer.msg('编辑失败');
//            },
//        });
    })
    function returnpage() {
        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
        parent.layer.close(index); //再执行关闭
    }
    layui.use(['myform','zzpUtils','form','laydate','jquery','zzpValidation'],function () {
        var form = layui.form,
            zzpUtils = layui.zzpUtils
            ,laydate = layui.laydate
            ,zzpValidation = layui.zzpValidation
            ,$ = layui.jquery;
        $('#simplewizardinwidget').wizard().on('finished',function () {
            alert("结束啦");
        });
        window.operateEvent ={
            //行内删除
            "click #delete": function (e, value, row, index) {
                console.log('触发了删除', row, value);
                var ids = [];
                ids.push(row.id);
                var data = {'ids': ids};
                $.ajax({
                    url: '/zxsswms/wmspacking/deleteStacking',
                    type: 'POST',
                    dataType: 'json',
                    data: JSON.stringify(data),
                    contentType: 'application/json',
                    success: function (data) {
                        layer.msg(data.title);
                        blanktable.bootstrapTable('refresh');
                    },
                    error: function (err) {
                        console.log(err);
                    }
                })
            }
        }

        function operateFormatter(value, row, index) {
            return [
                '<a class="layui-btn layui-btn-danger layui-btn-xs" id="delete">删除</a>'
            ].join('')
        }

        var blanktable = zzpUtils.table({
            elem: '#table',
            isApi: true,
            pagination:true,
            showColumns: false,// 列选择
            url: '/wmspacking/getListStacking',
            columns: [/*{
                field: '',
                checkbox: true
            },*/ {
                field: 'kwgd',
                title: '库位高度',
                editable: {
                    type: "text",                //编辑框的类型。支持text|textarea|select|date|checklist等
                    title: "库位高度",         //编辑框的标题
                    disabled: false,             //是否禁用编辑
                    emptytext: "空文本",         //空值的默认文本
                    mode: "popup",               //编辑框的模式：支持popup和inline两种模式，默认是popup
                    validate: function (value) {  //字段验证
                        if (!$.trim(value)) {
                            return '不能为空';
                        }
                    }
                }
            },{
                field: 'zsl',
                title: '主单位数量',
                editable: {
                    type: "text",
                    title: "主单位数量",
                    disabled: false,
                    emptytext: "空文本",
                    mode: "popup",
                    validate: function (value) {
                        if (!$.trim(value)) {
                            return '不能为空';
                        }
                    }
                }
            },{
                field: 'th',
                title: 'TI*HI',
                editable: {
                    type: "text",
                    title: "主单位数量",
                    disabled: false,
                    emptytext: "空文本",
                    mode: "popup",
                    validate: function (value) {
                        if (!$.trim(value)) {
                            return '不能为空';
                        }
                    }
                }
            },{
                field:'caozuo',
                title: '操作',
                events:operateEvent,
                formatter:operateFormatter
            }],
            queryParams: function () {
                var data = {};
                data['bzid'] = userId;
                return data;
            },
            //单元格编辑保存
            onEditableSave: function (field, row, oldValue, $el) {
                var titles = ["id", "kwgd", "th", "zsl"];
                //matching：筛选需要回传的编辑字段，格式为：matching(回传的字段集合, 数据)
                console.log('rrrrrrrrrrrr', row);
                row = matching(titles, row);
                //updateSaveAjax:保存的ajax，格式为：updateSaveAjax (请求路径, 请求方式, 数据)
                updateSaveAjax("/zxsswms/wmspacking/editStacking", 'POST', row);
            },
        });

        // 新增一条堆码明细
        $('#addDetail').click(function () {
            console.log('测试');
            var wareHight= $("#wareHight").val();
            var unitNumber=$("#unitNumber").val();
            var TIHI=$("#TIHI").val();
            if(wareHight==null ||wareHight==""){
                layer.msg("库位高度不可为空");
            }else if(unitNumber==null || unitNumber==""){
                layer.msg("主单位数量不可为空");
            }else if(TIHI==null || TIHI==""){
                layer.msg("TIHI不可为空");
            }else {
                var values = $('#form1 input[type="text"]');
                var datas = {};
                for (var ii = 0; ii < 3; ii++) {
                    var item = values[ii];
                    datas[item.name] = item.value;
                    $("#" + item.id).val('');
                }
                var datacopy = {};
                datacopy['bzid'] = userId;
                datacopy['kwgd'] = datas['wareHight'];
                datacopy['zsl'] = datas['unitNumber'];
                datacopy['th'] = datas['TIHI'];
                $.ajax({
                    url: '/zxsswms/wmspacking/addStacking',
                    type: 'POST',
                    dataType: 'json',
                    data: JSON.stringify(datacopy),
                    contentType: 'application/json',
                    success: function (data) {
                        if (data.type === "success") {
                            layer.msg(data.title);
                        }
                        blanktable.bootstrapTable('refresh');
                    },
                    error: function () {

                    }
                })
//            var datacopy = {};
//            datacopy['kwgd'] = datas['wareHight'];
//            datacopy['zsl'] = datas['unitNumber'];
//            datacopy['th'] = datas['TIHI'];
                console.log('ddddddddd', datacopy);
                // blanktable.bootstrapTable('append', datacopy);
            }
        })

        //筛选需要回传的编辑字段
        function matching(property, data) {
            var jsondata = {};
            for (var i = 0; i < property.length; i++) {
                for (var key in data) {
                    if (key.toString() === property[i]) {
                        jsondata[key] = data[key];
                    }
                }
            }
            console.log('jsondata', jsondata);
            return jsondata;
        }

        //单元格编辑的保存
        function updateSaveAjax (url, type, data) {
            data['bzid'] = userId;
            var rows = JSON.stringify(data);
            $.ajax({
                url: url,
                type: type,
                dataType: 'json',
                contentType: "application/json",
                data: rows,
                success: function (data, status) {
                    if (data.type === "success") {
                        layer.msg(data.title);
                    }
                },
                error: function () {
                    layer.msg('编辑失败');
                },
            });
        }

        laydate.render({
            elem: '#test1'
            ,theme: '#20a0ff'
            ,type: 'datetime'
        })
        laydate.render({
            elem: '#test2'
            ,theme: '#20a0ff'
            ,type: 'datetime'
        })

        window.operateEvent ={
            "click .layui-btn-primary":function (e, value, row, index) {
                alert(row.mc);
            }
        }

    });
</script>
</html>